{% from 'includes/common_macros.html' import announcement_bar, search_box, aux_nav, favicon with context %}

{% if request.LANGUAGE_CODE == settings.WIKI_DEFAULT_LANGUAGE and waffle.flag('surveygizmo') %}
  {# allow any artibtrary survey to be loaded via the SurveyGizmo admin #}
  {% set SURVEY_GIZMOS = ['beacon'] %}
{% else %}
  {% set SURVEY_GIZMOS = [] %}
{% endif %}

{% if request.LANGUAGE_CODE == 'xx' %}
  {% set meta = [('robots', 'noindex')] %}
{% endif %}
<!DOCTYPE html>
<html class="no-js" lang="{{ request.LANGUAGE_CODE }}"{% if DIR %} dir="{{ DIR }}"{% endif %}{% if settings.GTM_CONTAINER_ID %} data-gtm-container-id="{{ settings.GTM_CONTAINER_ID }}"{% endif %}>
<head>
  {% block head_top %}{% endblock %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>{% block title %}{% if title %}{{ title }} | {% endif %}{{ pgettext('site_title', 'Mozilla Support') }}{% endblock %}</title>

  {{ favicon() }}

  <link rel="search" type="application/opensearchdescription+xml" title="{{ _('Mozilla Support') }}" href="{{ url('search.plugin') }}"/>
  {% if feeds %}
    {% for feed in feeds %}
      <link rel="alternate" type="application/atom+xml" href="{{ feed[0] }}" title="{{ feed[1] }}"/>
    {% endfor %}
  {% endif %}

  {% stylesheet 'common' %}
  {% stylesheet 'print' %}
  {% for style in styles %}
    {% stylesheet style %}
  {% endfor %}

  <!--[if lte IE 7]>
    {% stylesheet 'ie' %}
  <![endif]-->
  <!--[if IE 8]>
    {% stylesheet 'ie8' %}
  <![endif]-->

  {% if meta %}
    {% for tag in meta %}
      <meta name="{{ tag[0] }}" content="{{ tag[1] }}"/>
    {% endfor %}
  {% endif %}

  {# This is to verify "we" own the site for some feature on youtube. See bug 992412. #}
  <meta name="google-site-verification" content="2URA-2Y9BeYYUf8B2BSsBSVetJJS3TZwlXBOaMx2VfY" />
  {# Bug 1385387 #}
  <meta name="google-site-verification" content="ueNbCgS4e1JIAgLGwufm-jHaIcLXFLtFMmR_65S1Ag0" />
  {# This is to verify "we" own the site for purposes of Bing/Yahoo search engine features. Bug 1149611 #}
  <meta name="msvalidate.01" content="1659173DC94819093068B0ED7C51C527" />

  {% if refresh %}
    <meta http-equiv="refresh" content="{{ refresh[1] }};url={{ refresh[0] }}"/>
  {% endif %}

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  {% if canonical_url %}
    <link rel="canonical" href="{{ canonical_url|safe }}" />
  {% endif %}

  <!--[if lt IE 9]>
  {# html5-shiv.js must be inside <head/> to work. #}
  <script src="{{ STATIC_URL }}sumo/js/libs/html5-shiv.js"></script>
  <![endif]-->

  {% include "includes/google-analytics.html" %}

  {# TrafficCop experiment_fxa_cta_topbar #}
  {% set run_experiments = False %}
  {% if waffle.flag('experiment_fxa_cta_topbar') %}
    {% if request.path in ['/en-US/kb/install-firefox-android-device-using-google-play',
                           '/en-US/kb/will-firefox-work-my-mobile-device',
                           '/en-US/kb/get-started-firefox-overview-main-features',
                           '/en-US/kb/update-firefox-latest-version',
                           '/en-US/kb/install-firefox-your-ipad-iphone-or-ipod'] %}
      {% set run_experiments = True %}
    {% endif %}
  {% endif %}
  {% if run_experiments %}
    {% javascript 'experiment_fxa_cta_topbar' %}
  {% endif %}
  {# end TrafficCop #}

</head>
<body class="html-{{ DIR }} logged-{% if user.is_authenticated() %}in{% else %}out{% endif %} responsive {{ classes }} {{ request.LANGUAGE_CODE }}"
      data-readonly="{{ settings.READ_ONLY|json }}"
      data-usernames-api="{{ url('users.api.usernames') }}"
      data-static-url="{{ STATIC_URL }}"
      data-media-url="{{ MEDIA_URL }}"
      {% if SURVEY_GIZMOS %}
        data-survey-gizmos="{{ SURVEY_GIZMOS|json }}"
      {% else %}
        data-survey-gizmos="[]"
      {% endif %}
      {% if ga_alternate_url %}
        data-ga-alternate-url="{{ ga_alternate_url }}"
      {% endif %}
      data-waffle-refresh-survey="{{ waffle.sample('refresh-survey')|json }}"
{% if extra_body_attrs -%}
  {% for attr, val in extra_body_attrs.items() %}{{ attr }}="{{ val }}" {% endfor %}
{%- endif %}>

{% set locale_picker_url = url('sumo.locales') %}
{% if localizable_url %}
  {% set locale_picker_url = locale_picker_url|urlparams(next=localizable_url) %}
{% endif %}
<ul id="nav-access">
  <li><a href="#main-content">{{ _('Skip to main content') }}</a></li>
  <li><a href="{{ locale_picker_url }}">{{ _('Switch language') }}</a></li>
  <li><a id="skip-to-search" href="#search-q">{{ _('Skip to search') }}</a></li>
</ul>

{% if settings.STAGE %}
  <div id="stage-banner">
    <div class="close-button">X</div>
    {{ _('This is a staging site, the content gets overwritten on the 1st of every month.<br>The production site is <a href="https://support.mozilla.org">here</a>.') }}
  </div>
{% endif %}

<div class="media-test"></div>

{# These will only be shown on small-ish screens, by media queries. #}
{% if request.MOBILE %}
  <div class="mobile-banner" id="mobile-warning">
    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
    <a href="javascript: history.back();">
      {{ _("This page doesn't have a mobile optimized version. Tap here to go back.") }}
    </a>
  </div>
{% else %}
  <div class="mobile-banner" id="mobile-warning">
    <div class="close-button" data-close-id="mobile-warning" data-close-memory="remember">X</div>
    <a href="?{{ request.QUERY_STRING }}&amp;mobile=1">
      {{ _('Tap here to go to the mobile version of the site.') }}
    </a>
  </div>
{% endif %}

{# TrafficCop experiment_fxa_cta_topbar #}
{% if run_experiments %}
  <div id="promotions" class="hidden">
    Sync your Firefox bookmarks, tabs and more to your phone.
    <a href="https://www.mozilla.org/firefox/features/sync/?utm_source=support.mozilla.org&utm_medium=referral&utm_campaign=sumo_promotions">Learn more</a>
    <a class="hidden" data-variation="a" href="https://accounts.firefox.com/?entrypoint=support.mozilla.org&utm_source=support.mozilla.org&utm_medium=referral&utm_campaign=sumo_promotions">Get started</a>
    <a class="hidden" data-variation="b" href="https://accounts.firefox.com/signup?service=sync&context=fx_desktop_v3&entrypoint=support.mozilla.org&utm_source=support.mozilla.org&utm_campaign=sumo_promotions">Get started</a>
    <a class="hidden" data-variation="c" href="https://www.mozilla.org/firefox/accounts/features/?entrypoint=support.mozilla.org&utm_source=support.mozilla.org&utm_medium=referral&utm_campaign=sumo_promotions">Get started</a>
  </div>
{% endif %}
{# end TrafficCop #}

<div id="announcements">
  {% call announcement_bar('geoip-suggestion', 'warning') %}{% endcall %}

  {% for announ in get_announcements() %}
      {% call announcement_bar(announ.id, 'warn') %}
          {{ announ.content }}
      {% endcall %}
  {% endfor %}
  {% if settings.READ_ONLY %}
      {% call announcement_bar('read-only', 'warn') %}
          {% include "includes/readonly_annoucement.html" %}
      {% endcall %}
  {% endif %}
</div>

<header>
  <div class="nav-flex">
    <h2 class="logo">
      <a href="{{ url('home') }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Home"></a>
    </h2>
    <a href="javascript:;" class="menu-toggle" data-toggle-nav>
      <svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.17 36.47">
        <title>kebab</title>
        <circle cx="4.09" cy="4.09" r="4.09" fill="currentColor" />
        <circle cx="4.09" cy="32.39" r="4.09" fill="currentColor" />
        <circle cx="4.09" cy="18.24" r="4.09" fill="currentColor" />
      </svg>
    </a>
    <div class="responsive-nav-wrap">
      <a href="javascript:;" class="close-menu" data-toggle-nav>
        <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.98 18.98">
          <title>close</title>
          <line x1="1.06" y1="1.06" x2="17.92" y2="17.92" fill="none" stroke="currentColor" stroke-width="3"/>
          <line x1="17.92" y1="1.06" x2="1.06" y2="17.92" fill="none" stroke="currentColor" stroke-width="3"/>
        </svg>
      </a>
      <div class="nav-wrap-scroll">
        {% if not hide_aux_nav %}
        <nav id="aux-nav" class="logged-{% if user.is_authenticated() %}in{% else %}out{% endif %}" role="navigation">
          <ul>
            {{ aux_nav(user, hide_aaq_link) }}
          </ul>
        </nav>
        {% endif %}
        {% if not settings.READ_ONLY %}
          <nav class="push-right" id="aux-nav-right" role="navigation">
            <ul>
            {% if show_header_fx_download() %}
              {# show-fx-download.js will remove the 'hidden' class below if the visitor is *NOT* using Firefox #}
              <li class="ff-btn-wrap">
                <a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&amp;utm_medium=referral&amp;utm_campaign=non-fx-button&amp;utm_content=header-download-button" class="firefox-download-button hidden" data-event-category="Download Button" data-event-action="Firefox for Desktop">{{ _('Download Firefox') }}</a>
              </li>
            {% endif %}
            {% if not hide_locale_switcher %}
              <li class="lang-switcher-nav-item">
                {% include "includes/icons/globe-icon.svg" %}
                <a href="{{ locale_picker_url }}" class="locale-picker"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{% if request.LANGUAGE_CODE == "en-US"%}EN{% else %}{{ request.LANGUAGE_CODE }}{% endif %} </a>
              </li>
            {% endif %}
            {% if not user.is_authenticated() %}
              <li>
                <a href="{{ url('users.auth') }}" class="signin-signup-button register"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Sign In">
                  {{ _('Log in / Sign up') }}
                </a>
              </li>
            {% else %}
              <li class="dropdown user-dropdown">
                <a href="javascript:;" class="user"  data-event-category="navigation" data-event-action="main navigation" data-event-label="User">
                  <span class="hide-on-mobile">{{ display_name(user) }}
                    <img class="avatar" src="{{ profile_avatar(user) }}">
                  </span>
                  <span class="mobile-only">{{ _('My Profile') }}</span>
                </a>
                <ul>
                  <li><a href="{{ profile_url(user) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Profile">{{ _('View Profile') }}</a></li>
                  <li><a href="{{ url('search')|urlparams(asked_by=user.username, a=1, w=2) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="My Questions">{{ _('My Questions') }}</a></li>
                  <li><a href="{{ profile_url(user, edit=True) }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Edit Profile">{{ _('Edit Profile') }}</a></li>
                  <li><a href="{{ url('users.edit_settings') }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Settings">{{ _('Settings') }}</a></li>
                  <li>
                    <a href="{{ url('messages.inbox') }}" data-event-category="navigation" data-event-action="main navigation" data-event-label="Inbox">
                      {{ _('Inbox') }}
                      {% if unread_message_count > 0 %}
                        <span class="unread-message-count">{{ unread_message_count }}</span>
                      {% endif %}
                    </a>
                  </li>
                  <li>
                    <form id="sign-out" action="{{ url('users.logout') }}" method="post">
                      {% csrf_token %}
                    </form>
                    <a
                      data-type="submit"
                      data-form="sign-out"
                      href="#sign-out"
                      data-event-category="navigation"
                      data-event-action="main navigation"
                      data-event-label="Sign Out">
                      {{ _('Sign Out') }}
                    </a>
                  </li>
                </ul>
              </li>
            {% endif %}
            </ul>
          </nav>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="cf">
    {% if not hide_header_search %}
      {{ search_box(settings, id='support-search', params=search_params) }}
    {% endif %}
  </div>
</header>

{% block breadcrumbs %}
  {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
{% endblock %}

<div class="container_12 cf {% block base_container_classes %}{% endblock %}" id="main-container">
  <div class="grid_12">
    {% if messages %}
      <ul class="user-messages">
        {% for message in messages %}
          {% if not message.message.startswith('fxa_notification') %}
          <li {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}

    {% block above_main %}{% endblock %}
  </div>

  {% block outer_side %}
    <aside class="grid_3 no-min hide-mobile">
      {% block side_top %}{% endblock %}
      {% block side %}{% endblock %}
      {% block side_bottom %}{% endblock %}
    </aside>
  {% endblock %}

  <div class="support-search-main cf">
    <div class="grid_12 search-form-large">
      {{ search_box(settings, id='support-search-results', params=search_params) }}
    </div>
  </div>

  <main id="main-content" role="main">
    {% block content %}{% endblock %}
  </main>
</div>

<footer>
  <div class="container_12 cf">
    <div class="grid_4">
      <a href="https://www.mozilla.org">
        <img class="footer-logo" src="{{ STATIC_URL }}sumo/img/moz-wordmark-light-reverse.svg" alt="Mozilla" />
      </a>
    </div>
    <div class="grid_4">
      <ul>
        <li>
          <h5>
            <a href="https://www.mozilla.org">{{ _('Mozilla') }}</a>
          </h5>
        </li>
        <li class="hide-mobile"><a href="https://www.mozilla.org/about/">{{ _('About') }}</a></li>
        <li class="hide-mobile"><a href="https://blog.mozilla.org/">{{ _('Blog') }}</a></li>
        <li class="hide-mobile"><a href="https://www.mozilla.org/contact/">{{ _('Contact Us') }}</a></li>
        <li class="hide-mobile"><a href="https://donate.mozilla.org/en-US/?presets=50,30,20,10&amount=30&utm_source=support.mozilla.org&utm_medium=referral&utm_content=footer&currency=usd">{{ _('Donate') }}</a></li>
        <li class="hide-mobile"><a href="https://kitsune.readthedocs.io/en/latest/">{{ _('Contribute to this site') }}</a></li>
        <li><a href="https://www.mozilla.org/en-US/about/legal/fraud-report/">{{ _('Report Trademark Abuse') }}</a></li>
        <li><a href="https://github.com/mozilla/kitsune/">{{ _('Source code') }}</a></li>
        <li><a class="show-mobile" href="https://twitter.com/firefox">{{ _('Twitter') }}</a></li>
        <li class="hide-mobile">
          <ul class="social-links">
            <li><a class="twitter" href="https://twitter.com/mozilla">{{ _('Twitter') }}<span> (@mozilla)</span></a></li>
            <li><a class="instagram" href="https://www.instagram.com/mozilla/">{{ _('Instagram') }}<span> (@mozilla)</span></a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="grid_4 hide-mobile">
      <ul>
        <li>
          <h5>
            <a href="https://www.mozilla.org/firefox/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Firefox') }}</a>
          </h5>
        </li>

        <li><a href="https://www.mozilla.org/firefox/new/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Download Firefox') }}</a></li>
        <li><a href="https://www.mozilla.org/firefox/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Desktop') }}</a></li>
        <li><a href="https://www.mozilla.org/firefox/mobile/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Mobile') }}</a></li>
        <li><a href="https://www.mozilla.org/firefox/features/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Features') }}</a></li>
        <li><a href="https://www.mozilla.org/firefox/channel/desktop/?utm_source=support.mozilla.org&utm_campaign=footer&utm_medium=referral">{{ _('Beta, Nightly, Developer Edition') }}</a></li>
        <li>
          <ul class="social-links">
            <li><a class="twitter" href="https://twitter.com/firefox">{{ _('Twitter') }}<span> (@firefox)</span></a></li>
            <li><a class="youtube" href="https://www.youtube.com/firefoxchannel">{{ _('YouTube') }}<span> (firefoxchannel)</span></a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="grid_8 cf">
      <div class="fineprint">
        <p>
        {% trans year=now().year %}
          Portions of this content are &copy;1998–{{ year }} by individual mozilla.org contributors. Content available under a <a href="//www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a>.
        {% endtrans %}
        </p>
      </div>
    </div>
    <div class="grid_4 small-links">
      <ul>
        <li><a rel="nofollow" href="https://www.mozilla.org/privacy/websites/">{{ _('Website Privacy Notice') }}</a></li>
        <li><a rel="nofollow" href="https://www.mozilla.org/privacy/websites/#cookies">{{ _('Cookies') }}</a></li>
        <li><a rel="nofollow" href="https://www.mozilla.org/about/legal/terms/mozilla/">{{ _('Legal') }}</a></li>
      </ul>
    </div>
    {% if not hide_locale_switcher %}
    <div class="grid_2 prefix_2 language-picker">
      Language <a href="{{ locale_picker_url }}"  data-event-category="navigation" data-event-action="main navigation" data-event-label="Locale Picker">{{ settings.LANGUAGES_DICT[request.LANGUAGE_CODE.lower()] }}</a>
    </div>
    {% endif %}
  </div>
</footer>{# /#footer #}

{% csrf_token %}

{# TODO: The JS url changes whenever our js code changes.
   But this should get cached busted whenever a locale is updated.
   It's complicatred to fix. But for now it isn't more broken than
   before. #}
{% if request.LANGUAGE_CODE %}
  <script src="{{ static('jsi18n/{lang}/djangojs.js'|f(lang=request.LANGUAGE_CODE|lower)) }}"></script>
{% endif %}

{% javascript 'common' %}
{% for script in scripts %}
  {% javascript script %}
{% endfor %}

{% javascript 'common.fx.download' %}

{# Temporary Pontoon testing - bug 812176 #}
{% if settings.STAGE %}
  <script src="https://pontoon.mozilla.org/pontoon.js"></script>
{% endif %}

{% block footer_script %}
{% endblock %}
</body>
</html>
